<template>
  <div class="login-wrap">
    <div class="login-top">
      <div class="login-left-img">
        <img src="@/assets/img/login-left.png" alt="" />
      </div>
      <div class="login-right-img">
        <img src="@/assets/img/login-right.png" alt="" />
      </div>

      <div class="login-logo">
        <img src="@/assets/img/login-logo.png" alt="" />
      </div>
      <div class="login-logo2">
        <img src="@/assets/img/login-logo2.png" alt="" />
      </div>
    </div>

    <div class="form">
      <div class="form-title">用户登录</div>
      <div class="form-view">
        <div class="form-item">
          <div class="form-label">账号</div>
          <div class="form-line"></div>
          <div class="form-input">
            <input type="text" v-model="form.username" placeholder="请输入账号" />
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">密码</div>
          <div class="form-line"></div>
          <div class="form-input">
            <input type="password" v-model="form.password" placeholder="请输入密码" />
          </div>
        </div>
        <div class="form-bottom">
          <el-checkbox v-model="rememberPass">记住密码</el-checkbox>
          <span @click="$router.replace('/reset-pass')">忘记密码</span>
        </div>
        <div class="form-btn" @click="login">登录</div>
      </div>
      <div style="flex: 1"></div>
      <div class="form-footer">
        <el-checkbox v-model="agree"></el-checkbox>
        <span style="margin-left: 0.125rem">我已阅读并接受</span>
        <!-- <span>《注册声明》</span>
                <span>《版权声明》</span> -->
        <span @click="show = true">《隐私政策》</span>
      </div>
    </div>

    <el-dialog title="隐私政策" :visible.sync="show" width="12rem">
      <div class="html" v-html="setting.site_xieyi"></div>
    </el-dialog>
  </div>
</template>

<script>
import { login, setting } from "@/api/common.js";
import _cache from "@/utils/cache.js";
export default {
  name: "login",
  data() {
    return {
      show: false,
      rememberPass: false,
      agree: false,
      form: {
        username: "",
        password: "",
      },
      setting: {},
    };
  },
  mounted() {
    if (_cache.get("username")) {
      this.form.username = _cache.get("username");
      this.form.password = _cache.get("password");
      this.rememberPass = true;
    }
    this.getSettingFun();
  },
  methods: {
    getSettingFun() {
      setting().then((res) => {
        if (res.code === 200) {
          this.setting = res.data;
        }
      });
    },
    login() {
      // 登录
      let { form } = this;
      if (!this.agree) {
        this.$message.error("请阅读并勾选隐私政策");
        return;
      }
      if (!form.username) {
        this.$message.error("请输入账号");
        return;
      }
      // if (!/^1[23456789]\d{9}$/.test(form.username)) {
      //   this.$message.error("手机号格式错误");
      //   return;
      // }
      if (!form.password) {
        this.$message.error("请输入密码");
        return;
      }
      login(form).then((res) => {
        if (res.code == 200) {
          if (this.rememberPass) {
            _cache.set("username", form.username, -1);
            _cache.set("password", form.password, -1);
          }
          _cache.set("token", res.data.token, res.data.token_time - Date.now() / 1000);
          this.$message.success("登录成功");
          this.$router.push("/");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="less">
.html {
  img {
    max-width: 100%;
    height: auto;
  }
}
</style>

<style lang="less" scoped>
.login-wrap {
  width: 100vw;
  height: 100vh;
  background: #fff;
  /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #4f8af8;
    border-color: #4f8af8;
  }
  /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #4f8af8;
  }
  /deep/.el-checkbox__label {
    font-size: 0.175rem;
    color: #999999;
  }
  .form {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 3.225rem;
    left: 8.4rem;
    width: 7.2rem;
    height: 8rem;
    background: #ffffff;
    box-shadow: 0px 0.025rem 0.375rem 0.0125rem rgba(79, 79, 79, 0.3);
    border-radius: 0.2rem;
    .form-title {
      font-size: 0.3rem;
      color: #333;
      font-weight: 800;
      text-align: center;
      padding-top: 0.7rem;
    }
    .form-view {
      width: 5rem;
      margin: 0.6rem auto 0;
      .form-item {
        display: flex;
        align-items: center;
        height: 0.625rem;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 0.05rem;
        border: 0.0125rem solid #eeeeee;
        margin-bottom: 0.25rem;
      }
      .form-label {
        width: 1.125rem;
        font-size: 0.175rem;
        color: #7d7d7d;
        text-align: center;
      }
      .form-line {
        width: 0.0125rem;
        height: 0.225rem;
        background: #eeeeee;
      }
      .form-input {
        display: flex;
        align-items: center;
        flex: 1;
        padding-right: 0.1875rem;
        padding-left: 0.1875rem;
        height: 100%;
        box-sizing: border-box;
        input {
          width: 100%;
          font-size: 0.175rem;
          color: #333;
          border: none;
          outline: none;
          font-size: 0.175rem;
          color: #333;
          &::-webkit-input-placeholder {
            font-size: 0.175rem;
            color: #d7d7d7;
          }
        }
      }
      .form-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.575rem;
        span {
          font-size: 0.175rem;
          color: #4f8af8;
          cursor: pointer;
          user-select: none;
        }
      }
      .form-btn {
        width: 5rem;
        height: 0.7rem;
        background: #4f8af8;
        cursor: pointer;
        user-select: none;
        border-radius: 0.05rem;
        font-size: 0.225rem;
        color: #fff;
        line-height: 0.7rem;
        text-align: center;
        letter-spacing: 0.05rem;
      }
    }
    .form-footer {
      width: 100%;
      height: 0.8375rem;
      text-align: center;
      line-height: 0.8375rem;
      background: #f5f6f8;
      border-radius: 0px 0px 0.2rem 0.2rem;
      font-size: 0.2rem;
      color: #999;
      span {
        cursor: pointer;
        user-select: none;
      }
    }
  }
  .login-top {
    position: relative;
    width: 100%;
    height: 7.5rem;
    background: linear-gradient(180deg, #4f8af8 0%, #4067f7 100%);
    .login-logo {
      position: absolute;
      top: 1.375rem;
      left: 3.25rem;
      width: 0.9375rem;
      height: 0.6rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .login-logo2 {
      position: absolute;
      top: 1.375rem;
      right: 3.25rem;
      width: 6.8625rem;
      height: 0.6rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .login-left-img {
      position: absolute;
      left: 0;
      top: 0;
      width: 4.6375rem;
      height: 4.6375rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .login-right-img {
      position: absolute;
      right: 0;
      top: 0;
      width: 7.5rem;
      height: 7.5rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
